<!-- 大宗气 -->
<template>
  <div v-loading="loading" class="energy_consume">
    <px-row :gutter="16">
      <px-col :span="8">
        <div class="black">
          <modelTitle :title="'费用趋势'" />
          <div class="gas-fee-wrap">
            <div class="top">
              <CostIcon />
              <div class="top-rt">
                <div class="text">能耗费用合计</div>
                <div class="num">{{ totalCost !== null ? totalCost : "-" }} 万元</div>
              </div>
            </div>
            <div class="item-wrap">
              <div class="item">
                <div class="text">同期</div>
                <div class="num">{{ samePeriodCost !== null ? samePeriodCost : "-" }}万元</div>
              </div>
              <div class="item">
                <div class="text">同比</div>
                <div class="num">{{ yoyVal !== null ? yoyVal + "%" : "-" }}</div>
              </div>
              <div class="item">
                <div class="text">上期</div>
                <div class="num">{{ previousCost !== null ? previousCost : "-" }}万元</div>
              </div>
              <div class="item">
                <div class="text">环比</div>
                <div class="num">{{ qoqVal !== null ? qoqVal + "%" : "-" }}</div>
              </div>
            </div>
          </div>
        </div>
      </px-col>
      <px-col :span="16">
        <div class="black">
          <div class="gas-fee-right-wrap">
            <div class="item">
              <div class="lf"><CDAIAIcon /></div>
              <div class="rt-wrap">
                <div class="text">CDA/IA</div>
                <div class="num-wrap">
                  <div class="num">{{ resData?.cda !== null ? resData?.cda : "-" }}</div>
                  <div class="unit">万元</div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="lf"><HPCDAIcon /></div>
              <div class="rt-wrap">
                <div class="text">HPCDA</div>
                <div class="num-wrap">
                  <div class="num">{{ resData?.hpcda !== null ? resData?.hpcda : "-" }}</div>
                  <div class="unit">万元</div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="lf"><XCDAIcon /></div>
              <div class="rt-wrap">
                <div class="text">XCDA</div>
                <div class="num-wrap">
                  <div class="num">{{ resData?.xcda !== null ? resData?.xcda : "-" }}</div>
                  <div class="unit">万元</div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="lf"><GN2Icon /></div>
              <div class="rt-wrap">
                <div class="text">N<sub>2</sub></div>
                <div class="num-wrap">
                  <div class="num">{{ resData?.gn2 !== null ? resData?.gn2 : "-" }}</div>
                  <div class="unit">万元</div>
                </div>
              </div>
            </div>
            <!-- <div class="item">
              <div class="lf"><PN2Icon /></div>
              <div class="rt-wrap">
                <div class="text">PN<sub>2</sub></div>
                <div class="num-wrap">
                  <div class="num">{{ resData?.pn2 !== null ? resData?.gn2 : "-" }}</div>
                  <div class="unit">万元</div>
                </div>
              </div>
            </div> -->
          </div>
          <div class="gas-fee-right-wrap">
            <div class="item">
              <div class="lf"><PArIcon /></div>
              <div class="rt-wrap">
                <div class="text">Ar</div>
                <div class="num-wrap">
                  <div class="num">{{ resData?.par !== null ? resData?.par : "-" }}</div>
                  <div class="unit">万元</div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="lf"><PO2Icon /></div>
              <div class="rt-wrap">
                <div class="text">O<sub>2</sub></div>
                <div class="num-wrap">
                  <div class="num">{{ resData?.po2 !== null ? resData?.po2 : "-" }}</div>
                  <div class="unit">万元</div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="lf"><PHeIcon /></div>
              <div class="rt-wrap">
                <div class="text">He</div>
                <div class="num-wrap">
                  <div class="num">{{ resData?.phe !== null ? resData?.phe : "-" }}</div>
                  <div class="unit">万元</div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="lf"><H2Icon /></div>
              <div class="rt-wrap">
                <div class="text">H<sub>2</sub></div>
                <div class="num-wrap">
                  <div class="num">{{ resData?.h2 !== null ? resData?.h2 : "-" }}</div>
                  <div class="unit">万元</div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="lf"><CO2Icon /></div>
              <div class="rt-wrap">
                <div class="text">CO<sub>2</sub></div>
                <div class="num-wrap">
                  <div class="num">{{ resData?.pco2 !== null ? resData?.pco2 : "-" }}</div>
                  <div class="unit">万元</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </px-col>
    </px-row>
    <px-row class="mg-top-16">
      <px-col :span="24">
        <div class="black">
          <modelTitle :title="'费用趋势'" />
          <btnImageAndData
            v-has="'ALL_ENERGY_COST_SUPPLY_DOWNLOAD'"
            class="btn1"
            @exportChange="val => handlerExport(val, 'line', 'firstLineChartRef')"
          />
          <btnImageAndData
            v-has="'ALL_ENERGY_COST_SUPPLY_DOWNLOAD'"
            class="btn2"
            @exportChange="val => handlerExport(val, 'line', 'secondLineChartRef')"
          />
          <!-- <px-button v-has="'ALL_ENERGY_COST_SUPPLY_DOWNLOAD'" class="btn-wrap" @click="handleExport('line')">导出</px-button> -->
          <div class="chart-box">
            <div ref="firstLineChartRef" class="chart" />
            <div ref="secondLineChartRef" class="chart" />
          </div>
        </div>
      </px-col>
    </px-row>
  </div>
</template>
<script setup>
import { ref, reactive, toRefs, getCurrentInstance, nextTick } from "vue";
import { getGasDataAPI } from "@/api/energy/supplyCost";
import { drawLineChart, drawStackingLineChart, drawStackingBarChart } from "../utils.js";
import { cloneDeep } from "@pureadmin/utils";
import CostIcon from "@/assets/svg/energy/cost.svg?component";
import CDAIAIcon from "@/assets/svg/energy/CDAIA.svg?component";
import HPCDAIcon from "@/assets/svg/energy/HPCDA.svg?component";
import XCDAIcon from "@/assets/svg/energy/XCDA.svg?component";
import GN2Icon from "@/assets/svg/energy/GN2.svg?component";
import PN2Icon from "@/assets/svg/energy/PN2.svg?component";
import PArIcon from "@/assets/svg/energy/PAr.svg?component";
import PO2Icon from "@/assets/svg/energy/PO2.svg?component";
import PHeIcon from "@/assets/svg/energy/PHe.svg?component";
import H2Icon from "@/assets/svg/energy/H2.svg?component";
import CO2Icon from "@/assets/svg/energy/CO2.svg?component";
import modelTitle from "@/views/common/components/modelTitle/index.vue";
import btnImageAndData from "@/views/common/energy/components/btnImageAndData/index.vue";

const { proxy } = getCurrentInstance();

const props = defineProps({
  queryParams: {
    type: Object,
    default: () => ({
      timeType: "Monthly",
      factory: "",
      timeRange: []
    }),
    required: true
  }
});

const firstLineChartRef = ref();
const secondLineChartRef = ref();

const state = reactive({
  loading: false,
  totalCost: 0,
  samePeriodCost: 0,
  yoyVal: "",
  previousCost: 0,
  qoqVal: "",
  resData: {},
  firstType: ["CDA/IA", "HPCDA", "XCDA", "He", "N₂"],
  secondType: ["Ar", "O₂", "H₂", "CO₂"]
});
const { loading, totalCost, samePeriodCost, yoyVal, previousCost, qoqVal, resData, firstType, secondType } = toRefs(state);

let chartObj = {};

// 查询
const getData = async () => {
  try {
    state.loading = true;
    const p = props.queryParams;
    const params = {
      dimension: p.timeType === "Monthly" ? "M" : "Y",
      startDate: p.timeRange.length > 0 ? p.timeRange[0] : "",
      endDate: p.timeRange.length > 0 ? p.timeRange[1] : "",
      level: p.factory
    };
    const res = await getGasDataAPI(params);
    state.resData = res;
    state.totalCost = res.summary;
    state.samePeriodCost = res.summaryYoyValue;
    state.yoyVal = res.summaryYoy;
    state.previousCost = res.summaryMomValue;
    state.qoqVal = res.summaryMom;
    nextTick(() => {
      if (res.costGas?.xaxis) {
        let firstCostGas = cloneDeep(res.costGas);
        let secondCostGas = cloneDeep(res.costGas);
        firstCostGas.yaxis = firstCostGas.yaxis?.filter(i => firstType.value.find(e => e === i.name));
        secondCostGas.yaxis = secondCostGas.yaxis?.filter(i => secondType.value.find(e => e === i.name));
        chartObj.firstLineChartRef = drawStackingLineChart(firstLineChartRef.value, firstCostGas?.xaxis, firstCostGas?.yaxis);
        chartObj.secondLineChartRef = drawStackingLineChart(secondLineChartRef.value, secondCostGas?.xaxis, secondCostGas?.yaxis);
      }
    });
  } catch (err) {
    console.log(err);
  } finally {
    state.loading = false;
  }
};

const handleExport = val => {
  let params = state.resData;
  params.type = val;
  proxy.download("post", "/energy/energyCost/exportSupplyGas", params, "供给费用-天然气.xlsx");
};

defineExpose({
  getData
});
// 导出方法
const handlerExport = (val1, val2, val3) => {
  if (val1 === "data") {
    let params = state.resData;
    params.type = val2;
    proxy.download("post", "/energy/energyCost/exportSupplyGas", params, "供给费用-天然气.xlsx");
  } else {
    let myChart = chartObj[val3];
    if (!myChart) return;
    // 获取Base64图片数据
    const imgUrl = myChart.getDataURL({
      type: "png",
      pixelRatio: 2,
      backgroundColor: "#fff"
    });
    // 创建并触发下载链接
    const link = document.createElement("a");
    link.href = imgUrl;
    link.download = "chart.png";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }
};
</script>

<style lang="scss" scoped>
@import url("@/views/common/energy/cost/supplyCost/scss/common.scss");

.gas-fee-wrap {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-top: 46px;

  .top {
    display: flex;
    flex: 1;

    .top-rt {
      margin-left: 10px;
    }
  }

  .item-wrap {
    display: flex;
    flex: 1;
    justify-content: space-between;

    .item {
      display: flex;
      flex-direction: column;
    }
  }
}

.gas-fee-right-wrap {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;

  .item {
    display: flex;

    .lf {
      margin-right: 12px;
    }

    .rt-wrap {
      display: flex;
      flex-direction: column;

      .text {
        font-size: 14px;
      }

      .num-wrap {
        display: flex;
        align-items: baseline;

        .num {
          font-size: 20px;
          font-weight: 500;
          color: rgb(0 0 0 / 90%);
        }

        .unit {
          margin-left: 4px;
          font-size: 14px;
          font-weight: 400;
          color: rgb(0 0 0 / 80%);
        }
      }
    }
  }
}
.chart-box {
  flex: 1;
  margin-top: 26px;
  display: flex;
}
.chart {
  flex: 1;
}
.btn1 {
  position: absolute;
  top: 16px;
  right: calc(50% + 24px);
  :deep(.px-button):nth-child(2) {
    display: none;
  }
}
.btn2 {
  position: absolute;
  top: 16px;
  right: 24px;
}
</style>
